<template>
  <l-data-panel v-if="data._isInit" :label="config.title">
    <l-echarts ref="main" :option="option"></l-echarts>
  </l-data-panel>
</template>
<script>
import mixin from "../chart";
export default {
  mixins: [mixin()],
  data() {
    return {
      option: {},
    };
  },
  methods: {
    getOption() {
      const { labelKey, valueKey, valueKey1 } = this.config;

      this.option.series = [
        {
          type: "bar",
          label: {},
          itemStyle: {},
          data: [],
          zlevel: 10,
          emphasis: {
            disabled: false,
            itemStyle: {
              color:'red'
            },
          },
        },
        {
          type: "bar",
          barGap: "-100%",
          label: {},
          itemStyle: {},
          data: [],
          emphasis: {
            disabled: false,
            itemStyle: {
              color:'red'
            },
          },
        },
      ];

      const yAxis = {
        show: false,
      };

      const xAxis = {
        type: "category",
        splitLine: {
          show: false,
        },
        axisLabel: {},
        axisLine: {
          show: false,
        },
        axisTick: false,
      };

      // 数据配置
      const data = this.showData || [];
      if (labelKey && valueKey && valueKey1) {
        const serieData1 = []; // 占比
        const serieData2 = []; // 整体
        data.forEach((t) => {
          const percent = parseFloat(
            ((t[valueKey] * 100) / t[valueKey1]).toFixed(2)
          );
          const value1 = [];
          const value2 = [];

          if (this.series.bar.isX) {
            value1.push(percent);
            value1.push(t[labelKey]);

            value2.push(100);
            value2.push(t[labelKey]);
          } else {
            value1.push(t[labelKey]);
            value1.push(percent);

            value2.push(t[labelKey]);
            value2.push(100);
          }

          serieData1.push({
            value: value1,
            v: t[valueKey],
            mv: t[valueKey1],
            p: percent,
          });
          serieData2.push({
            value: value2,
            v: t[valueKey],
            mv: t[valueKey1],
            p: percent,
          });
        });
        this.option.series[0].data = serieData1;
        this.option.series[1].data = serieData2;
      }

      this.setbar(this.option.series[0],this.series.bar)
      this.setbar(this.option.series[1],this.series.bar)

      // 设置样式
      const { itemStyle } = this.series;
      this.option.series[0].itemStyle = itemStyle;
      this.option.series[1].itemStyle = itemStyle;

      // 文本标签设置
      this.option.series[0].label = this.getLabelEx(this.series.percentLabel),this.series.bar.isX;
      this.option.series[1].label = this.getLabelEx(this.label,this.series.bar.isX);

      if (this.series.bar.isX) {
        this.option.yAxis = xAxis;
        this.option.xAxis = yAxis;
      } else {
        this.option.xAxis = xAxis;
        this.option.yAxis = yAxis;
      }

      if (this.echarts.grid) {
        this.option.grid = this.getGrid(this.echarts.grid);
      }

      return this.option;
    },
    setbar(
      serie,
      { barWidth }
    ) {
      if(barWidth != null && barWidth != undefined){
        serie.barWidth = barWidth;
      }
    },

    getLabelEx({
        show,
        formatter,
        color,
        position,
        fontWeight,
        fontSize,
      },isX) {
        const label = {
          show
        };
        if (formatter) {
          label.formatter = formatter.replace(/{e}/g, "\n");
        }

        if(isX){
          if(position == 'insideTop'){
            position = 'insideRight'
          }

          if(position == 'top'){
            position = 'right'
          }
        }

        this.setProp(label, "color", color);
        this.setProp(label, "position", position);
        this.setProp(label, "fontWeight", fontWeight);
        this.setProp(label, "fontSize", fontSize);

        return label;
      },
  },
};
</script>

